<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../../css/font.css">
    <link rel="stylesheet" href="../../css/xadmin.css">
    <script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>标题
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="todoName" name="todoName" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label">
                    <span class="x-red">*</span>优先级
                </label>
                <div class="layui-input-inline">
                    <select name="todoPriority" id="todoPriority" lay-filter="todoPriority" required="" lay-verify="required">
                        <option value="">请选择优先级</option>
                        <option value="最低">最低</option>
                        <option value="一般">一般</option>
                        <option value="较高">较高</option>
                        <option value="最高">最高</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label">
                    <span class="x-red">*</span>开始
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="todoStartDate" id="todoStartDate" required="" lay-verify="required" placeholder="yyyy-MM-dd HH:mm:ss"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label">
                    <span class="x-red">*</span>结束
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="todoEndDate" id="todoEndDate" required="" lay-verify="required" placeholder="yyyy-MM-dd HH:mm:ss"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text" style="width: 600px">
                <label class="layui-form-label"><span class="x-red">*</span>描述</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea" name="todoDesc" id="todoDesc"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-radius layui-btn-fluid" lay-filter="create_todo" lay-submit="">
                    提交
                </button>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'layer','laydate'],function () {
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var laydate=layui.laydate;

        var todoPriority;

        //实例laydate
        laydate.render({
            elem:'#todoStartDate'
            ,type: 'datetime'
        });
        laydate.render({
            elem:'#todoEndDate'
            ,type: 'datetime'
        });
        form.on('select(todoPriority_edit)',function (data) {
            todoPriority=data.value;
        });

        //监听提交
        form.on('submit(create_todo)', function (obj) {
            //获取表单数据
            var field = obj.field;
            field.todoPriority=todoPriority;
            // field.todoStatus=todoStatus;
            var myDate=new Date();
            //获取当前时间并格式化yyyy-MM-dd HH:mm:ss
            var nowDate=myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+
                myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds();
            field.todoCreateDate=nowDate;
            $.ajax({
                url: 'http://localhost:8080/todo/create',
                data: field,
                contentType: "application/x-www-form-urlencoded",
                type: 'POST',
                xhrFields: {
                    withCredentials: true
                },
                success: function(data) {
                    if(data.status == "success") {
                        layer.msg('创建代办成功', {
                            icon: 1,
                            time: 2000
                        }, function() {
                            layer.close(todoAdd);
                            table.reload('todoTable',{
                                url:'http://localhost:8080/todo/mytodo'
                            })
                        });
                    } else {
                        layer.msg(data.data.errMsg, {
                            icon: 5,
                            time:2000
                        });
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
